import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { notification } from 'antd';
import RobotBtnImg from '@/assets/robot.png';
import RobotChatImg from '@/assets/chat.png';
import RobotQhImg from '@/assets/qh.png';
import RobotAddImg from '@/assets/add.png';

@connect(({ notice, loading }) => ({
  notice,
  loading: loading.effects['notice/getNotice'],
}))



class RobotBtn extends Component {

  state = {
    isShow:false
  };

  showRobot =()=>{

    const {currentUser} = this.props;
    // qzkf.customerBtnNeedRobotIdOnClick(currentUser.robotId);
    // window.open(webUrl+'custom/web?robotId='+currentUser.robotId)
    try {
      qzkf.customerBtnNeedRobotIdOnClick(window.localStorage.getItem('robotId'));
      // window.open(webUrl+'custom/web?robotId='+currentUser.robotId)
    }catch (e) {
      console.warn('脚本加载失败');
      notification.warn({
        message: '请求失败',
        description: '脚本加载失败，请先确认脚本链接是否正确以及是否能访问'
      })
    }
  };

  qhRobot=()=>{
    window.location.href ='/overviewRobots'
  };

  addRobot=()=>{
    window.location.href ='/overviewRobots/NewRobot'
  };
  componentDidMount() {
    document.addEventListener('click', this.hideTool);
  }
  hideTool = () => {
    let {isShow} = this.state;
    isShow = false;
    this.setState({
      isShow
    })
  }

  showTool=(event)=>{
    this.stopPropagation(event);
    let {isShow} = this.state;
    isShow = !isShow;
    this.setState({
      isShow
    })
  };

  stopPropagation(e) {
    e.nativeEvent.stopImmediatePropagation();
  }

  render() {
    const {currentUser} = this.props;
    const {isShow} = this.state;
    return (
      <div className="robotBtn" id="qizhiChatBtn">
        <img alt='' src={RobotBtnImg} onClick={this.showTool} style={{maxWidth: 160}} />
        <span style={{position: "absolute", left: 65, top: 75, color: "#fff"}}> {currentUser.robotName}</span>
        <img alt='' src={RobotChatImg} onClick={this.showRobot} style={{maxWidth: 44, left: -20,top: 57,opacity:isShow?1:0}} className='robotToolImg' />
        <img alt='' src={RobotQhImg} onClick={this.qhRobot} style={{maxWidth: 44, left: 8,top: -3,opacity:isShow?1:0}} className='robotToolImg' />
        <img alt='' src={RobotAddImg} onClick={this.addRobot} style={{maxWidth: 44, left: 76,top: -22,opacity:isShow?1:0}} className='robotToolImg'  />
      </div>
    );
  }
}

export default connect (({ user }) => ({
  currentUser: user.currentUser
}))(RobotBtn);
